import VXETable from 'vxe-table';
import Upload from '@/components/upload/index.vue';
import FormDatee from '@/components/form-date';
import FormTable from '@/components/form-table';
import FormSelect from '@/components/form-select';
import FormRadio from '@/components/form-radio';
import FormInput from '@/components/form-input';
VXETable.renderer.add('FormImgUpload', {
  renderItemContent(renderOpts, params): any {
    const { data, field, $form } = params;
    const props = renderOpts.props || {};
    return (
      <Upload
        v-model={data[field]}
        {...props}
        onChange={() => $form.updateStatus(params)}
      />
    );
  },
});

VXETable.renderer.add('FormDate', {
  renderItemContent(renderOpts, params): any {
    const { data, field, $form } = params;
    const props = renderOpts.props || {};
    return (
      <FormDatee
        v-model={data[field]}
        {...props}
        onChange={() => $form.updateStatus(params)}
      />
    );
  },
});

VXETable.renderer.add('FormTable', {
  renderItemContent(renderOpts: any, params: any): any {
    const { data, field, $form } = params;
    const props = renderOpts.props || {};
    const tableChange = () => {
      renderOpts.onChange && renderOpts.onChange(params);
      $form.updateStatus(params);
    };
    return (
      <FormTable v-model={data[field]} {...props} onChange={tableChange} />
    );
  },
});

VXETable.renderer.add('FormSelect', {
  renderItemContent(renderOpts: any, params): any {
    const { data, field, $form } = params;
    const props = renderOpts.props || {};
    const onChange = () => {
      renderOpts.onChange && renderOpts.onChange(params);
      $form.updateStatus(params);
    };
    return <FormSelect v-model={data[field]} {...props} onChange={onChange} />;
  },
});

VXETable.renderer.add('FormRadio', {
  renderItemContent(renderOpts: any, params): any {
    const { data, field, $form } = params;
    const props = renderOpts.props || {};
    const onChange = (value) => {
      renderOpts.onChange && renderOpts.onChange(value, params);
      $form.updateStatus(params);
    };

    return <FormRadio v-model={data[field]} {...props} onChange={onChange} />;
  },
});

VXETable.renderer.add('FormInput', {
  renderItemContent(renderOpts: any, params): any {
    const { data, field, $form } = params;
    const props = renderOpts.props || {};
    const onChange = () => {
      renderOpts.onChange && renderOpts.onChange(params);
      $form.updateStatus(params);
    };
    return <FormInput v-model={data[field]} {...props} onChange={onChange} />;
  },
});
